<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/2
  Time: 19:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			.a {
				position: relative;
				right: 60px;
			}
			
			.aa {
				position: relative;
				left: 1300px;
			}
			.context{
				height: 40px;
				width: 200px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
		<!-- Favicon icon -->
		<link rel="icon" type="image/png" sizes="16x16" href="${pageContext.request.contextPath}/backstatic/assets/images/favicon.png">
		<title>文章管理</title>
		<!-- Bootstrap Core CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- This page CSS -->
		<!-- chartist CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
		<!--		<link href="../../../backstatic/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
-->
		<!--c3 CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/assets/plugins/c3-master/c3.min.css" rel="stylesheet">
		<!-- Custom CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/css/style.css" rel="stylesheet">
		<!-- Dashboard 1 Page CSS -->
		<link href="${pageContext.request.contextPath}/backstatic/css/pages/dashboard.css" rel="stylesheet">
		<!-- You can change the theme colors from here -->
		<link href="${pageContext.request.contextPath}/backstatic/css/colors/default-dark.css" id="theme" rel="stylesheet">

	</head>

	<body class="fix-header fix-sidebar card-no-border">

		<div class="preloader">
			<div class="loader">
				<div class="loader__figure"></div>
				<p class="loader__label">凡一博客园</p>
			</div>
		</div>

		<div id="main-wrapper">

			<header class="topbar">
				<nav class="navbar top-navbar navbar-expand-md navbar-light">
					<div class="navbar-header">
						<a class="navbar-brand" href="index.html">
							<b>
                  				<img src="${pageContext.request.contextPath}/backstatic/assets/images/logo-icon.png" alt="homepage" class="dark-logo" /><span class="dark-logo">凡一博客园</span>
              				</b>
						</a>
					</div>
				</nav>
			</header>

			<aside class="left-sidebar">
				<!-- Sidebar scroll-->
				<div class="scroll-sidebar">
					<!-- Sidebar navigation-->
					<nav class="sidebar-nav">
						<ul id="sidebarnav">
							<li>
								<a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/article/backIndexView" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">后台主页</span></a>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/superAdminView" aria-expanded="false"><i class="mdi mdi-account-check"></i><span class="hide-menu">管理员</span></a>
							</li>
							<li class="active">
								<a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-book-open-variant"></i><span class="hide-menu">文章</span></a>
								<ul class="sun-menu">
									<li >
										<a href="${pageContext.request.contextPath}/article/ShowArticleView">查看文章</a>
									</li>
									<li class="active">
										<a href="#">管理文章</a>
									</li>
								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-emoticon"></i><span class="hide-menu">留言</span></a>
								<ul class="sun-menu">
									<li>
										<a href="${pageContext.request.contextPath}/message/messageBackView">查看留言</a>
									</li>
								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="mdi mdi-emoticon"></i><span class="hide-menu">评论</span></a>
								<ul class="sun-menu">
									<li>
										<a href="#">查看评论</a>
									</li>
									<li>
										<a href="#">管理评论</a>
									</li>
								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="pages-blank.html" aria-expanded="false"><i class="mdi mdi-table menu-icon-inbox"></i><span class="hide-menu">用户</span></a>
								<ul class="sun-menu">
									<li>
										<a href="${pageContext.request.contextPath}/user/showUserView">用户中心</a>
									</li>

								</ul>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/articleIndexView" aria-expanded="false"><i class="mdi mdi-earth"></i><span class="hide-menu">返回前台</span></a>
							</li>
							<li>
								<a class="waves-effect waves-dark" href="${pageContext.request.contextPath}/admin/pages404View" aria-expanded="false"><i class="mdi mdi-help-circle"></i><span class="hide-menu">404</span></a>
							</li>
						</ul>
						<div class="text-center m-t-30 a">
							<a href="${pageContext.request.contextPath}/" class="btn waves-effect waves-light btn-info">Log out</a>
						</div>
					</nav>
				</div>
			</aside>

			<div class="page-wrapper">

				<div class="container-fluid">
					<div class="col-md-5 align-self-center">
						<h3 class="text-themecolor">管理文章》》</h3>
					</div>

					<div>
						<div class="panel panel-default">
							<div class="panel-heading">

								<div class="btn-toolbar aa" role="toolbar" style="margin-top: 10px;">

									<form class="form-inline pull-right">
										<input type="text" class="form-control" id="search" placeholder="请输入搜索的内容">
										<button type="submit" class="btn btn-primary pull-right">
										<span class="glyphicon glyphicon-search"></span>
									</button>
									</form>
								</div>
								<div class="btn-group" role="group">
									<button class="btn btn-info" data-toggle="modal" data-target="#myModalAdd"><span class="glyphicon glyphicon-plus"></span> 增加</button>
								</div>
								<div class="btn-group" role="group">
									<button id="batchbtnDel" class="btn btn-warning"><span class="glyphicon glyphicon-remove"></span> 批量删除</button>
								</div>
							</div>
							<div class="panel-body">
								<table id="tb" class="table table-hover table-bordered text-center">
									<tr>
										<td class="text-center">ID</td>
										<td class="text-center">标题</td>
										<td class="text-center">作者</td>
										<td class="text-center">类型</td>
										<td class="text-center">内容</td>
										<td class="text-center">加入时间</td>
										<td class="text-center">CQ</td>
									</tr>
									<tbody id="tbody">

									</tbody>
								</table>
							</div>
							<div class="page">
								<nav>
									<ul class="pagination pull-right">
										<li>
											<a href="#">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li>
											<a href="#">1</a>
										</li>
										<li>
											<a href="#">2</a>
										</li>
										<li>
											<a href="#">3</a>
										</li>
										<li>
											<a href="#">4</a>
										</li>
										<li>
											<a href="#">5</a>
										</li>
										<li>
											<a href="#" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
									</ul>
								</nav>
								<nav class="pagination pull-right">
									<ul id="mypage"></ul>
								</nav>

								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 添加Modal -->
			<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">增加文章</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" id="addForm">

								<div class="form-group">
									<label for="title" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="title" name="title" placeholder="请输入文章标题">
									</div>
								</div>

								<div class="form-group">
									<label for="author" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="author" name="author" placeholder="请输入作者">
									</div>
								</div>

								<div class="form-group">
									<label for="articleContent" class="col-sm-2 control-label"></label>
									<div class="col-sm-10">
										<textarea class="form-control" id="articleContent" name="articleContent" rows="3" placeholder="请输入文章内容"></textarea>
									</div>
								</div>

								<div class="form-group">
									<label for="typeId" class="col-sm-2 control-label"></label>
									<div class="col-sm-5">
										<select class="form-control type" id="typeId" name="typeId">
											<option value="-1">-请选择文章类型-</option>
										</select>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary save">保存</button>
						</div>
					</div>
				</div>
			</div>
			<%--添加模态框end--%>
			<%--修改模态框begin--%>
			<div class="modal fade" id="myModalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">编辑信息</h4>
						</div>
						<div class="modal-body">
							<form class="form-horizontal" id="updateForm">

								<div class="form-group">
									<label for="articleId" class="col-sm-2 control-label">ID</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="articleId" name="articleId" readonly="readonly">
									</div>
								</div>
								<div class="form-group">
									<label for="title" class="col-sm-2 control-label">TITLE</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="updatetitle" name="title" >
									</div>
								</div>

								<div class="form-group">
									<label for="author" class="col-sm-2 control-label">AUTHOR</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="updateauthor" name="author" >
									</div>
								</div>

								<div class="form-group">
									<label for="articleContent" class="col-sm-2 control-label">CONTENT</label>
									<div class="col-sm-10">
										<textarea class="form-control" id="updatearticleContent" name="articleContent" rows="3" ></textarea>
									</div>
								</div>

								<div class="form-group">
									<label for="typeId" class="col-sm-2 control-label">TYPE</label>
									<div class="col-sm-5">
										<select class="form-control type" id="updatetypeId" name="typeId">
											<%--<option value="-1">-请选择文章类型-</option>--%>
										</select>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary edit">修改</button>
						</div>
					</div>
				</div>
			</div>
			<%--修改模态end--%>
			<footer class="footer"> Welcome to fyi world

				<a href="#" title="凡一博客" target="_blank">凡一博客</a>
			</footer>

		</div>


		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/jquery/jquery.min.js"></script>
		<!-- Bootstrap popper Core JavaScript -->
		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/js/popper.min.js"></script>
		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<!-- slimscrollbar scrollbar JavaScript -->
		<script src="${pageContext.request.contextPath}/backstatic/js/perfect-scrollbar.jquery.min.js"></script>
		<!--Wave Effects -->
		<script src="${pageContext.request.contextPath}/backstatic/js/waves.js"></script>
		<!--Menu sidebar -->
		<script src="${pageContext.request.contextPath}/backstatic/js/sidebarmenu.js"></script>
		<!--Custom JavaScript -->
		<script src="${pageContext.request.contextPath}/backstatic/js/custom.min.js"></script>
		<!-- ============================================================== -->
		<!-- This page plugins -->
		<!-- ============================================================== -->
		<script src="${pageContext.request.contextPath}/backstatic/assets/plugins/chartist-js/dist/chartist.min.js"></script>

		<script type="text/javascript">
			$(function() {
				$.ajax({
					url:"${pageContext.request.contextPath}/article/selectAllArticle",
					type:"post",
					contentType:"application/json;charset=utf-8",
					dataType:"json",
					success:function (data) {
					console.log(data)
					var $strHtml = "";
						$.each(data.data, function(index, object) {
						$strHtml += "<tr  data-id=" + object.articleId +">";
						$strHtml += "<td align='center'>" + object.articleId + "</td>";
						$strHtml += "<td align='center'>" + object.title + "</td>";
						$strHtml += "<td align='center'>" + object.author + "</td>";
						$strHtml += "<td align='center'>" + object.articleType.typeName+ "</td>";
						$strHtml += "<td align='center'><div class='context'>" + object.articleContent + "</div></td>";
						$strHtml += "<td align='center'>" + object.createTime + "</td>";
						$strHtml += '<td align=\'center\'><button type="button" class="btn btn-danger updateM " data-target="#myModalUpdate" data-toggle="modal">修改</button> <button class="btn btn-warning del"><i class="glyphicon glyphicon-remove"></i>删除</button></td>';
						$strHtml += "</tr>";
						});
					$('#tbody').append($strHtml);
					}
				});

				/*类型*/
				$.ajax({
					url:"${pageContext.request.contextPath}/type/articleManagerType",
					type:"post",
					contentType:"application/json;charset=utf-8",
					dataType:"json",
					success:function (data) {
						console.log(data)
						var $strHtml = "";
						$.each(data.data, function(index, object) {
							$strHtml += "<option value='" + object.typeId + "'>" + object.typeName + "</option>";
						});
						$('.type').append($strHtml);
					}
				});
				/*添加*/
				$("body").on("click", ".save", function() {
					console.log($("#addForm").serialize());
					$.ajax({
						type: "POST",
						url: "${pageContext.request.contextPath}/article/addArticle",
						data: $("#addForm").serialize(),
						dataType: "json",
						success: function(data) { /*执行成功*/
							console.log(data);
							if(data.code == 200) {
								//关闭添加模态框
								$('#myModalAdd').modal('hide');
								//刷新页面
								window.location.reload();
							}
							alert(data.msg);
						},
						error: function() { /*执行失败*/
							alert("添加失败！");
						}
					});
				});
				/*数据回显*/
				//根据id查询要修改的内容
				$("body").on("click",".updateM",function () {
					var $id = $(this).parents("tr").data("id");
					console.log($id);

					$.ajax({
						url:"${pageContext.request.contextPath}/article/selectArticleById/"+$id,
						type: "post",
						contentType: "application/json;charset=utf-8",
						dataType: "json",
						success:function (data) {
							$('#articleId').val(data.data.articleId);
							$('#updatetitle').val(data.data.title);
							$('#updateauthor').val(data.data.author);
							$('#updatearticleContent').val(data.data.articleContent);
							$('#updatetypeId').val(data.data.typeId);
						}
					})

				})
				/*修改*/

				$("body").on("click", ".edit", function() {
					console.log($("#updateForm").serialize());
					$.ajax({
						type: "POST",
						url: "${pageContext.request.contextPath}/article/updateArticle",
						data: $("#updateForm").serialize(),
						dataType: "json",
						success: function(data) { /*执行成功*/
							console.log(data);
							if(data.code == 200) {
								//关闭修改模态框
								$('#myModalUpdate').modal('hide');
								window.location.reload();
							}
							alert(data.msg);
						},
						error: function() { /*执行失败*/
							alert("修改失败！");
						}
					});
				});

				/*删除*/
				$("body").on("click", ".del", function() {
					if(confirm('您是真的要删除吗？')) {
						//获取当前删除行的id
						var $id = $(this).parents("tr").data("id");
						console.log($id);
						var _this = $(this); //缓存当前按钮元素

						$.ajax({
							url:"${pageContext.request.contextPath}/article/deleteArticle/"+$id,
							type: "post",
							contentType: "application/json;charset=utf-8",
							dataType: "json",
							success:function (data) {
								console.log(data)
								if(data.code == 200) {
									//删除当前行
									_this.parents("tr").remove();
								}
								alert(data.msg);
							},
							error: function() { /*执行失败*/
								alert("删除失败！");
							}
						})
					}
				});
				/*分页*/

				$.ajax({ //去后台查询第一页数据
					type: "get",
					url: "${pageContext.request.contextPath}/FilmServlet?method=findByPage",
					dataType: "json",
					data: {
						page: '1'
					}, //参数：当前页为1
					success: function(data) {
						appendHtml(data.data) //处理第一页的数据
						var options = { //根据后台返回的分页相关信息，设置插件参数
							bootstrapMajorVersion: 3, //如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
							currentPage: data.page, //当前页数
							totalPages: data.totalPage, //总页数
							numberOfPages: data.pageSize, //每页记录数
							itemTexts: function(type, page, current) { //设置分页按钮显示字体样式
								switch(type) {
									case "first":
										return "首页";
									case "prev":
										return "上一页";
									case "next":
										return "下一页";
									case "last":
										return "末页";
									case "page":
										return page;
								}
							},
							onPageClicked: function(event, originalEvent, type, page) { //分页按钮点击事件
								$.ajax({ //根据page去后台加载数据
									url: "${pageContext.request.contextPath}/FilmServlet?method=findByPage",
									type: "get",
									dataType: "json",
									data: {
										"page": page
									},
									success: function(data) {
										appendHtml(data.data); //处理数据
									}
								});
							}
						};
						$('#mypage').bootstrapPaginator(options); //设置分页
					}
				});
			});
		</script>
	</body>

</html>